<template>
	<view>
		<view class="topBox">
			<u-navbar leftIconSize="0px" title="店铺中心" :placeholder="true" bgColor="rgba(0,0,0,0)"  :titleStyle="{ fontSize: '38rpx', fontWeight: 'bold'}"></u-navbar>
			<view class="merchantInfo">
				<image class="userHeader" src="../../../static/uni.png"></image>
				<view class="info">
					<text class="merchantName">瑞安加叻服饰经营部</text>
					<text class="status">营业中</text>
				</view>
				<text class="telPhone">17357706169</text>
			</view>
		</view>
		<view class="accountBox">
			<view class="overview" @click="goAssetAccount">
				<text>账户总览</text>
				<image src="../../../static/icons/right-b2.png"></image>
			</view>
			<view class="propertyBox">
				<view class="overall">
					<text class="title-l">总资产</text>
					<text class="money-l">¥<text class="devoemyd">987654321.95</text></text>
				</view>
				<view class="yesterday">
					<text class="title-r">昨日收入</text>
					<text class="money-r">¥<text>87649.95</text></text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="grade">
				<text class="title">等级中心</text>
				<image src="../../../static/icons/right-b2.png"></image>
				<text class="tips">查看等级</text>
			</view>
			<view class="menus">
				<text class="title">功能服务</text>
				<view class="itemBox" @click="goFinancialData">
					<image src="/static/icons/merchant-finance.png"></image>
					<text>财务数据</text>
				</view>
				<view class="itemBox" @click="goStoreSetup">
					<image src="/static/icons/merchant-shop.png"></image>
					<text>门店设置</text>
				</view>
				<view class="itemBox" @click="goCollectionCodeManagement">
					<image src="/static/icons/merchant-QRcode.png"></image>
					<text>收款码管理</text>
				</view>
				<view class="itemBox" @click="goSelfServiceLoading">
					<image src="/static/icons/merchant-inputpiece.png"></image>
					<text>自助进件</text>
				</view>
				<!-- <view class="itemBox">
					<image src="/static/icons/merchant-equipment.png"></image>
					<text>我的设备</text>
				</view>
				<view class="itemBox">
					<image src="/static/icons/merchant-shiftturnover.png"></image>
					<text>交接班</text>
				</view> -->
				<view class="itemBox" @click="goLabel">
					<image src="/static/icons/merchant-identifying.png"></image>
					<text>标识</text>
				</view>
				<view class="itemBox" @click="goMerchantInformation">
					<image src="/static/icons/merchant-information.png"></image>
					<text>店铺信息</text>
				</view>
				<view class="itemBox" @click="goAccountInformation">
					<image src="/static/icons/merchant-account.png"></image>
					<text>当前账号</text>
				</view>
			</view>
		</view>
		<text class="switchover" @click="goSwitchShop">切换店铺</text>
		<text class="logout" @click="logout">退出登录</text>
		<!--底部菜单（动态渲染）-->
		<customTab :activeRouter="activeRouter"></customTab>
	</view>
</template>

<script>
	import customTab from '@/components/customTab';
	export default {
		components:{
			customTab
		},
		created(){
			let routes = getCurrentPages(); //获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route; //获取当前页面路由
			this.activeRouter = '/' + curRoute;
		},
		onShow(){
			let token = uni.getStorageSync('mertoken')
			let exp = uni.getStorageSync('merexp')
			const now = Math.floor(Date.now() / 1000);
			
			if(!token || exp < now){
				this.$Router.push({
					path: '/pages/index/merchantLogin'
				})
			}
		},
		data(){
			return {
				activeRouter:'',
			}
		},
		methods:{
			/**退出登录**/
			logout(){
				uni.removeStorageSync('mertoken');
				uni.removeStorageSync('meruserinfo');
				uni.removeStorageSync('merexp');
				this.$Router.push({
					path: '/pages/index/merchantLogin'
				})
			},
			/**收款码管理**/
			goCollectionCodeManagement(){
				this.$Router.push({
					path: '/pages/merchant/collectionCodeManagement'
				})
			},
			/**门店设置**/
			goStoreSetup(){
				this.$Router.push({
					path: '/pages/merchant/storeSetup'
				})
			},
			/**商家信息**/
			goMerchantInformation(){
				this.$Router.push({
					path: '/pages/merchant/information/merchant'
				})
			},
			/**当前账号**/
			goAccountInformation(){
				this.$Router.push({
					path: '/pages/merchant/account/index'
				})
			},
			/**账户余额**/
			goAssetAccount(){
				this.$Router.push({
					path: '/pages/merchant/assetAccount/index'
				})
			},
			/**财务数据**/
			goFinancialData(){
				this.$Router.push({
					path: '/pages/merchant/financialData/index'
				})
			},
			/**标签**/
			goLabel(){
				this.$Router.push({
					path:"/pages/merchant/label"
				})
			},
			/**自助进件**/
			goSelfServiceLoading(){
				this.$Router.push({
					path:"/pages/merchant/selfServiceLoading/index"
				})
			},
			/**切换店铺**/
			goSwitchShop(){
				this.$Router.push({
					path:"/pages/merchant/switchShop"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	// @font-face {
	//   font-family: 'devoemyd';
	//   src: url('../../../static/fonts/devoemyd.ttf') format('truetype');
	// }
	@font-face {
	    font-family: 'devoemyd';
	    src: url('/static/fonts/devoemyd.ttf');
	    font-weight: normal;
	    font-style: normal;
	}
	.topBox{
		width: 100%;
		height: 420rpx;
		background: linear-gradient(to bottom, #f9c848 0%, rgba(249,200,72,0.6) 100%);
		.merchantInfo{
			width: 88%;
			height: 130rpx;
			float: left;
			margin-left: 6%;
			margin-top: 20rpx;
			.userHeader{
				width: 120rpx;
				height: 120rpx;
				margin-top: 5rpx;
				float: left;
				border-radius: 50%;
			}
			.info{
				width: calc(100% - 150rpx);
				float: right;
				height:65rpx;
				margin-top: 10rpx;
				.merchantName{
					width: auto;
					float: left;
					height: 65rpx;
					line-height: 65rpx;
					color: rgb(60,50,25);
					font-size: 34rpx;
					font-weight: bold;
				}
				.status{
					width: auto;
					height: 65rpx;
					line-height: 65rpx;
					font-size: 30rpx;
					float: right;
					color: #58c832;
				}
			}
			.telPhone{
				width: calc(100% - 150rpx);
				float: right;
				height:50rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				color: rgb(60,50,25);
			}
		}
	}
	.accountBox{
		width: 88%;
		height: 210rpx;
		float: left;
		margin-left: 6%;
		background-color: #fff;
		margin-top: -70rpx;
		border-radius: 20rpx;
		.overview{
			width: 93%;
			height: 50rpx;
			float: left;
			margin-left: 3.5%;
			margin-top: 25rpx;
			text{
				width: auto;
				float: left;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 31rpx;
				letter-spacing: 1rpx;
				color: rgb(47,47,47);
				font-weight: 400;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				float: left;
				margin-left: 6rpx;
				margin-top: 10rpx;
			}
		}
		.propertyBox{
			width: 93%;
			height: 100rpx;
			margin-top: 10rpx;
			float: left;
			margin-left: 3.5%;
			.overall,.yesterday{
				width: 50%;
				height: 100%;
				float: left;
				.title-l,.title-r{
					width: 100%;
					float: left;
					height: 40rpx;
					line-height:40rpx;
					font-size: 26rpx;
					font-weight: bold;
					color: rgb(153,153,153);
				}
				.money-l,.money-r{
					width: auto;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 39rpx;
					font-weight: bold;
					color: rgb(49,47,48);
					text{
						margin-left: 8rpx;
					}
				}
				.money-l{
					float: left;
					.devoemyd{
						font-family: 'devoemyd';
					}
				}
				.money-r{
					float: right;
				}
				
				.title-l{
					text-align: left;
				}
				.title-r{
					text-align: right;
				}
			}
		}
	}
	.content{
		width: 88%;
		height: auto;
		float: left;
		margin-left: 6%;
		margin-top: 30rpx;
		.grade{
			width: 90%;
			height: 90rpx;
			background:linear-gradient(to right, #464463 0%, #242737 100%);;
			float: left;
			margin-left: 5%;
			border-radius: 15rpx  15rpx 0rpx 0rpx;
			.title{
				width: auto;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 4%;
				color: rgb(250,242,229);
			}
			.tips{
				width: auto;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: rgba(255,255,255,0.8);
				float: right;
				margin-right: 8rpx;
			}
			image{
				width: 28rpx;
				height: 28rpx;
				float: right;
				margin-right: 4%;
				margin-top:21rpx;
			}
		}
		.menus{
			width: 100%;
			height: auto;
			float: left;
			background-color: #fff;
			margin-top: -20rpx;
			border-radius: 13rpx;
			box-shadow: 0rpx 5rpx 10rpx rgba(0,0,0,.15);
			padding-bottom: 15rpx;
			// padding-left:15rpx ;
			// padding-right:15rpx ;
			.title{
				width: 93%;
				float: left;
				margin-left: 3.5%;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 32rpx;
				margin-top: 20rpx;
				margin-bottom: 5rpx;
				font-weight: 450;
			}
			.itemBox{
				width: 25%;
				height: 135rpx;
				float: left;
				image{
					position: relative;
					left: 50%;
					margin-left: -33rpx;
					width:66rpx;
					height: 66rpx;
					margin-top: 10rpx;
				}
				text{
					width: 100%;
					float: left;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
					font-size: 23rpx;
					color: rgb(46,46,46);
				}
			}
		}
	}
	.switchover{
		width: 88%;
		height: 85rpx;
		float: left;
		margin-left: 6%;
		margin-top: 35rpx;
		background-color: #fff;
		line-height: 85rpx;
		font-size: 28rpx;
		text-align: center;
		border-radius: 20rpx;
		box-shadow: 0rpx 5rpx 10rpx rgba(0,0,0,.05);
	}
	.logout{
		width: 88%;
		height: 85rpx;
		float: left;
		margin-left: 6%;
		margin-top: 20rpx;
		background-color: #ec4235;
		color: #fff;
		line-height: 85rpx;
		font-size: 28rpx;
		text-align: center;
		border-radius: 20rpx;
		box-shadow: 0rpx 5rpx 10rpx rgba(0,0,0,.05);
	}
</style>